import { PrimaryC, XYAxisChartsC } from '@/src/comps';
import React from 'react';
import { domElementToImageUrl, getDPI } from '@/src/utils/utils';
import { Divider } from 'antd';

let xAxis4 = ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06'];
let series4 = [
  {
    name: '负债',
    data: [0.14, 0.3, 0.7, 1.5, 3.2, 4.5],
  },
  {
    name: '资产',
    data: [0.14, 0.3, 0.7, 1.5, 3.2, 4.5],
  },
];
/***
 * 适用于任何dom元素包括echarts
 */
export default class DomToImage extends React.PureComponent {
  state = {
    src: '',
  };
  handleDown = async () => {
    const p = {
      dpi: getDPI()[0], //96
      scale: 1,
    };
    const src = await domElementToImageUrl(document.getElementById('chartsDom'), p);
    this.setState({ src });
    saveAs(src, JSON.stringify(p) + '.png');
  };

  render() {
    return (
      <>
        <PrimaryC title={'下载'} onClick={this.handleDown}></PrimaryC>
        <div>
          <img src={this.state.src} title={'我是点击下载后显示的被下载图片'} />
        </div>
        <Divider />
        <div id={'chartsDom'} style={{ width: 700, height: 400 }}>
          <XYAxisChartsC
            series={series4}
            xAxis={xAxis4}
            height={400}
            type='lineStack'
            markArea={[
              { range: ['01-01', '01-03'], color: '#EAF4D7' },
              {
                range: ['01-03', '01-04'],
                color: '#FBDEE1',
              },
              { range: ['01-04', '01-06'], color: '#FEF5D0' },
            ]}
          />
        </div>
      </>
    );
  }
}
